<template>
    <div class="order-details">
        <div class="breadcrumb">
            <RouterLink class="plain-link breadcrumb-link" :to="{ name: '/home/orders-management' }">
                订单查看
            </RouterLink>
            / 详情页面
        </div>
        <div class="order-content">
            <div class="order-title">订单详情</div>
            <div class="order-status mt20">{{ orderStatus }}</div>
            <div v-if="orderDetails.status === 3" class="order-status-step mt20">
                <div class="order-step-2 mr14">提交订单</div>
                <div class="order-step-2">工人接单</div>
                <div class="order-step-2">确认收货</div>
                <div class="order-step-2">完成订单</div>
            </div>
            <div v-else-if="orderDetails.status === 2" class="order-status-step mt20">
                <div class="order-step-1 mr14">提交订单</div>
                <div class="order-step-1">工人接单</div>
                <div class="order-step-1">确认收货</div>
                <div class="order-step-1">完成订单</div>
            </div>
            <div v-else class="order-status-step mt20">
                <div class="order-step-1 mr14">提交订单</div>
                <div :class="[orderDetails.status === 1 ? 'order-step-2' : 'order-step-1']">工人接单</div>
                <div :class="[orderDetails.status === 1 ? 'order-step-2' : 'order-step-1']">确认收货</div>
                <div :class="[orderDetails.status === 1 ? 'order-step-2' : 'order-step-1']">完成订单</div>
            </div>
            <div class="completion-time mt30">
                <div>{{ orderDetails.createTime || '--' }}</div>
                <div>{{ orderDetails.orderTime || '--' }}</div>
                <div>{{ orderDetails.completedTime || '--' }}</div>
                <div>{{ orderDetails.completedTime || '--' }}</div>
            </div>
            <div class="order-information mt30">
                <div class="order-information-img">
                    <img :src="thumbnail" />
                </div>
                <div class="order-information-name">{{ orderDetails.serviceDetail.serviceName }}</div>
                <div class="order-information-spec">
                    <span
                        style="
                            border-radius: 4px;
                            border: solid 1px #adb0b8;
                            font-size: 12px;
                            color: #666666;
                            padding: 0 3px;
                            margin-right: 5px;
                        "
                        v-for="item in orderDetails.serviceDetail.specifications"
                        :key="item.specName"
                    >
                        {{ item.optionName }}
                    </span>
                </div>
                <div class="order-information-number">*{{ orderDetails.amount || '--' }}</div>
                <div class="order-information-price">￥{{ orderDetails.payment || '--' }}</div>
            </div>
            <div class="server-info">
                <div class="server-info-title">服务信息</div>
                <div class="server-info-font">姓名：{{ orderDetails.customerName }}</div>
                <div class="server-info-font">电话：{{ orderDetails.customerPhone }}</div>
                <div class="server-info-font">服务时间：{{ orderDetails.appointmentTime }}</div>
                <div class="server-info-font">地址：{{ orderDetails.address }}</div>
            </div>
            <div class="server-info">
                <div class="server-info-title">工人信息</div>
                <div class="server-info-font">姓名：{{ orderDetails.serverName || '--' }}</div>
                <div class="server-info-font">电话：{{ orderDetails.serverPhone || '--' }}</div>
            </div>
            <div class="server-info">
                <div class="server-info-title">详细信息</div>
                <div class="server-info-font">订单编号：{{ orderDetails.orderNumber || '--' }}</div>
                <div class="server-info-font">备注信息：{{ orderDetails.remark || '--' }}</div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { getOrderDetails } from '@/api/api.query.util';
import { useRoute, useRouter } from 'vue-router';
import { ref } from 'vue';
import { formatDateBeiJing } from '@/utils/utils';

const thumbnail = require('@/assets/image/taylor-sondgeroth-ltsKOg_q_Gc-unsplash@2x.png');

const orderDetails = ref({});
const orderStatus = ref('');

const router = useRouter();
const route = useRoute();

getOrderDetails({
    method: 'GET',
    data: {
        orderNumber: route.query.orderNumber,
    },
}).then((res) => {
    if (res.result.status === 1) {
        orderStatus.value = '等待工人接单';
    } else if(res.result.status === 2){
        orderStatus.value = '订单已完成';
    }else if(res.result.status === 3){
        orderStatus.value = '订单已取消';
    }else if(res.result.status === 4){
        orderStatus.value = '等待用户确认收货';
    }
    // res.result.createTime = formatDateBeiJing(res.result.createTime, '2022-MM-dd hh:mm', 'UCT');
    //res.result.orderTime = res.result.orderTime ? formatDateBeiJing(res.result.orderTime, '2022-MM-dd hh:mm', 'UCT') : '';
    //res.result.appointmentTime = formatDateBeiJing(res.result.appointmentTime, '2022-MM-dd hh:mm', 'UCT');
    orderDetails.value = res.result;
});
</script>

<style lang="scss" scoped>
.order-details {
    height: 100%;
    flex-grow: 1;
    padding: 20px 30px;
    background-color: var(--bg-default);
    border-radius: var(--border-radius);
}
.breadcrumb,
.breadcrumb-link {
    color: var(--text-secondary);
    font-size: var(--font-size-small);
}
.order-content {
    margin-top: 20px;
}
.order-title {
    font-size: 14px;
    color: #666666;
}
.order-status {
    color: #3ab0a2;
    font-size: 20px;
}
.order-status-step {
    width: 708px;
    height: 20px;
    background-color: #ebebeb;
    border-radius: 10px;
    display: flex;
}
.order-step-1 {
    font-size: 12px;
    width: 185px;
    height: 20px;
    background-color: #3ab0a2;
    border-radius: 10px;
    line-height: 20px;
    text-align: center;
    color: #ffffff;
}
.order-step-2 {
    font-size: 12px;
    height: 20px;
    width: 185px;
    line-height: 20px;
    text-align: center;
    color: #999999;
}
.completion-time {
    width: 708px;
    color: #333333;
    font-size: 12px;
    display: flex;
}
.completion-time div {
    width: 25%;
    text-align: center;
}

.order-information {
    border-top: solid 1px #ebebeb;
    display: flex;
    padding: 20px 0;
    width: 100%;
}
.order-information-img {
    img {
        height: 44px;
        width: 44px;
    }
}
.order-information-name {
    margin-left: 20px;
    color: #3ab0a2;
    font-size: 14px;
    height: 44px;
    line-height: 44px;
}
.order-information-spec {
    margin-left: 80px;
    color: #666666;
    font-size: 12px;
    min-width: 200px;
    height: 44px;
    line-height: 44px;
}
.order-information-number {
    color: #666666;
    font-size: 12px;
    min-width: 120px;
    height: 44px;
    line-height: 44px;
}
.order-information-price {
    color: #666666;
    font-size: 12px;
    min-width: 120px;
    height: 44px;
    line-height: 44px;
}
.server-info {
    border-top: solid 1px #ebebeb;
    padding: 20px 0;
}
.server-info-title {
    font-size: 14px;
    color: #333333;
    line-height: 28px;
}
.server-info-font {
    font-size: 12px;
    color: #333333;
    line-height: 28px;
}
.mt20 {
    margin-top: 20px;
}
.mt30 {
    margin-top: 30px;
}
.mr14 {
    margin-right: -20px;
}
</style>
